<template>

  <p>
    <input v-model="新增的区" type="input" width="500" height="128"/>

    <button type="button" class="layui-btn layui-btn-sm" @click='新增区'>新增区</button>
    当前账号：{{ 账号 }}
  </p>

  <vxe-table border resizable highlight-hover-row show-overflow ref="xTable" :data="tableData"
             :edit-config="{trigger: 'click', mode: 'cell'}" size="small" :loading="加载中"
             @edit-actived="修改之前"
             @edit-closed="保存修改">
    <vxe-table-column type="seq" width="40"></vxe-table-column>
    <vxe-table-column field="区服开关" title="分配" width="70">
      <template #default="{ row }">
        <showSelect v-model:number="row.区服开关" @change="保存修改({row})"></showSelect>
      </template>
    </vxe-table-column>
    <vxe-table-column field="区服名称" title="区服" width="90"></vxe-table-column>
    <vxe-table-column field="vip" title="vip" width="70" :edit-render="{name: '$input'}"></vxe-table-column>
    <vxe-table-column field="元宝" title="元宝" width="70" :edit-render="{name: '$input'}"></vxe-table-column>
    <vxe-table-column field="日常" title="日常" width="80" :edit-render="{name: '$input'}"></vxe-table-column>
    <vxe-table-column field="区服状态" title="区服状态" width="110" :edit-render="{name: '$input'}"></vxe-table-column>
    <vxe-table-column field="script1" title="修改时间" width="110" :edit-render="{name: '$input'}"></vxe-table-column>
    <vxe-table-column title="操作" width="100">
      <template #default="{row}">
        <vxe-button status="danger" icon="fa fa-trash-o" @click='删除区(row.区服名称)'>删除</vxe-button>
<!--                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" >删除</button>-->
        <!-- <button type="button" class="layui-btn layui-btn-xs">上移</button> -->
        <!-- <button type="button" class="layui-btn layui-btn-xs">下移</button> -->
        <!-- <button type="button" class="layui-btn layui-btn-xs" @click='保存修改(row)'>保存修改</button> -->
      </template>
    </vxe-table-column>
  </vxe-table>

</template>

<script>
import showSelect from "../分配开关显示";

export default {
  components: {showSelect},
  data() {
    return {
      新增的区: "",
      加载中: true,
      tableData: [],
      修改前的值:""
    };
  },
  methods: {
    刷新: function () {
      this.tableData = [];
      this.加载中 = true;
      let T = this;
      this.$请求(
          "/rootnumber/area",
          {
            账号: this.账号, //"root5", //this.账号,
          },
          function (data) {
            T.加载中 = false;
            T.tableData = data.data;
          }
      );
    },
    新增区: function () {
      if (!this.新增的区 || this.新增的区 == "") {
        alert("请输入新增区");
        return;
      }
      let T = this;
      this.$请求(
          "/add/areaClothing",
          {
            区服名称: (this.新增的区).trim(),
            账号: this.账号,
          },
          function (obj) {
            if(obj.data.code!==1){
              T.$XModal.message({content: obj.data.message, status: "error"});
              return;
            }
            T.$XModal.message({content: "添加成功", status: "success"});
            T.刷新();
          },
          function () {
            T.$XModal.message({content: "添加失败", status: "error"});
            T.刷新();
          }
      );
    },
    删除区: function (区服) {
      let T = this;
      this.$请求(
          "/del/areaClothing",
          {
            区服名称: 区服,
            账号: this.账号,
          },
          function () {
            T.$XModal.message({content: "删除成功", status: "success"});
            T.刷新();
          },
          function () {
            T.$XModal.message({content: "删除失败", status: "error"});
            T.刷新();
          }
      );
    },

    editClosedEvent({row, column}) {
      console.log(row);
      console.log(column.property);
      // console.log('----------');
      // console.log(column.property);
      // console.log(row[column.property]);
       const $table = this.$refs.xTable;
      // 判断单元格值是否被修改
      if ($table.isUpdateByRow(row, column.property.toString())) {
        console.log("被修改了");
      }else{
        console.log('没哟被修改');
      }
    },
    修改之前:function({row,column}){
      this.修改前的值=row[column.property]
    },
    保存修改: function ({row, column}) {
      let T = this;
      if(column){
        if (this.修改前的值==row[column.property]){
          return;
        }
      }
      let data = JSON.parse(JSON.stringify(row));
      data.账号 = this.账号;
      this.加载中 = true;
      this.$请求(
          "/area/openclose",
          data,
          function () {
            T.$XModal.message({content: "修改成功", status: "success"});
            T.刷新();
          },
          function () {
            T.$XModal.message({content: "修改失败", status: "error"});
            T.刷新();
          }
      );
    },
  },
  created() {
    console.log("区服详情页创建成功");
    this.刷新();
  },
  watch: {
    账号(val) {
      this.刷新();
    },
  },
  props: ["账号"],
};
</script>

<style>
button {
  margin: 1px !important;
  border: 0px !important;
  /* padding: px !important; */
}
</style>
